<template>
<div id="app">
  <router-link to="/home" active-class="why-active">home</router-link>
  <router-link to="/about" active-class="why-active">about</router-link>
  <router-link to="/user/why/id/11" active-class="why-active">用户</router-link>
  <router-link to="/category">分类</router-link>
  <button @click="jumpMethods">关于</button>
  <button @click="forwardOneStep">前进一步</button>
  <router-view v-slot="props">
    <transition name="why">
      <component :is="props.Component"></component>
    </transition>
  </router-view>
</div>
</template>

<script>
import { useRouter } from 'vue-router'
export default {
  name: 'App',
  methods: {
    // jumpMethods () {
    //   this.$router.push('/about')
    // }
  },
  setup () {
    const router = useRouter()
    const jumpMethods = () => {
      router.push('/about')
      // router
    }
    const forwardOneStep = () => {
      router.go(1)
    }
    return {
      jumpMethods,
      forwardOneStep
    }
  }
}
</script>

<style>
#app a{
  margin: 0 10px;
}
.why-active {
  color: red;
}
.why-enter-from,
.why-leave-to {
  opacity: 0;
}
.why-leave-to,
.why-leave-from {
  opacity: 1;
}
.why-enter-active,
.why-leave-active {
  transition: opacity 1s ease;
}
</style>
